<template>
  <div class="big" :class="show ? 'opennotice' : ''" @click.stop="close">
    <div class="notice">
      <h3>{{ $t("language.notice.title") }}</h3>
      <strong>{{ $t("language.notice.name") }}</strong>
      <p>
        {{ $t("language.notice.text") }}
      </p>
      <span @click.stop="close">{{ $t("language.notice.btn") }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineExpose } from "vue";
let show = ref(false);
let open = () => {
  show.value = true;
};
let close = () => {
  show.value = false;
};
defineExpose({
  open,
  close,
});
</script>

<style scoped lang="scss">
.opennotice {
  bottom: 0 !important;
}
.big {
  position: fixed;
  z-index: 9999999999999;
  width: 100vw;
  height: 100vh;
  transition: all 0.3s ease-out;
  background-color: transparent;
  bottom: -100vh;
  .notice {
    width: 100%;
    height: 80vh;
    position: absolute;
    padding: 20px 15px 0;
    bottom: 0;
    background-color: rgb(50, 53, 62);
    h3 {
      text-align: center;
      margin-bottom: 20px;
      font-size: 30px;
      color: #fff;
    }
    p {
      font-size: 16px;
      color: #b5bac8;
      line-height: 26px;
      margin-top: 8px;
    }
    strong {
      font-size: 16px;
      color: #b5bac8;
      line-height: 26px;
      font-weight: normal;
    }
    span {
      width: 80%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #0a906c;
      color: #fff;
      width: 80%;
      display: block;
      border-radius: 20px;
      position: absolute;
      left: 50%;
      margin-left: -40%;
      bottom: 10px;
    }
  }
}
</style>
